<template>
  <div style="width: 500px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="Name" prop="name">
        <el-input v-model="ruleForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="Gender" prop="gender">
        <el-radio v-model="ruleForm.gender" label="M">M</el-radio>
        <el-radio v-model="ruleForm.gender" label="F">F</el-radio>
      </el-form-item>
      <el-form-item label="Age" prop="age">
        <el-input type="number" v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="Focus" prop="focus">
        <el-checkbox-group v-model="ruleForm.focus">
          <el-checkbox label="Head & Neck" name="focus"></el-checkbox>
          <el-checkbox label="Abdomen" name="focus"></el-checkbox>
          <el-checkbox label="Pelvis" name="focus"></el-checkbox>
          <el-checkbox label="Breast" name="focus"></el-checkbox>
          <el-checkbox label="Stroke" name="focus"></el-checkbox>
          <el-checkbox label="Aging" name="focus"></el-checkbox>
          <el-checkbox label="Brain" name="focus"></el-checkbox>
          <el-checkbox label="Heart" name="focus"></el-checkbox>
          <el-checkbox label="Thorax" name="focus"></el-checkbox>
          <el-checkbox label="Cancer" name="focus"></el-checkbox>
          <el-checkbox label="Fetus" name="focus"></el-checkbox>
          <el-checkbox label="STI" name="focus"></el-checkbox>
          <el-checkbox label="HPV" name="focus"></el-checkbox>
          <el-checkbox label="Osteoporosis" name="focus"></el-checkbox>
          <el-checkbox label="Liver" name="focus"></el-checkbox>
          <el-checkbox label="Bladder" name="focus"></el-checkbox>
          <el-checkbox label="Prostate" name="focus"></el-checkbox>
          <el-checkbox label="Kidney" name="focus"></el-checkbox>
          <el-checkbox label="Pancreas" name="focus"></el-checkbox>
          <el-checkbox label="Spleen" name="focus"></el-checkbox>
          <el-checkbox label="Gallblader" name="focus"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Range" prop="priceRange">
        <el-input type="number" placeholder="e.g. 3000" v-model.number="ruleForm.priceRange"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
        <el-button @click="resetForm('ruleForm')">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      baseURL: 'http://47.115.43.236:8181',
      ruleForm: {
        name: '',
        gender: '',
        focus: [],
        age: '',
        priceRange: '',
      },
      rules: {
        name: [
          { required: true, message: 'Please enter name', trigger: 'blur' },
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        focus: [
          { type: 'array', required: true, message: 'Please select at least one focus', trigger: 'change' }
        ],
        age: [
          { type: 'number', required: true, message: 'Please enter age', trigger: 'change' }
        ],
        priceRange: [
          { type: 'number', required: true, message: 'Please enter price range', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(_this.ruleForm);
          axios.post(_this.baseURL + '/hpi/getOutput', _this.ruleForm).then(response => {
            //根据利润排序，降序
            response.data.data.sort((a, b) => b.revenue - a.revenue);
            // console.log(response.data.data);
            //根据客人预算进行过滤
            _this.ruleForm.priceRange = _this.ruleForm.priceRange + 2000
            let priceTotal = 0
            let data = []
            response.data.data = response.data.data.forEach(item => {
              
              if (priceTotal+parseInt(item.listPrice) <= _this.ruleForm.priceRange) {
                priceTotal += parseInt(item.listPrice)
                data.push(item)
              }
              // console.log("total: " + priceTotal);
            });
            // console.log(data);
            _this.$router.push({
              name: 'OutputPage', params: {
                data: data,
                name: _this.ruleForm.name,
                gender: _this.ruleForm.gender,
                age: _this.ruleForm.age,
                priceRange: _this.ruleForm.priceRange,
              }
            });
          }).catch(error => {
            console.log(error);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
